<template>
  <div class="not-found">
    <a-row justify="center" align="middle" style="min-height: 100vh;">
      <a-col :xs="22" :sm="16" :md="12" :lg="10" :xl="8">
        <a-card :bordered="false">
          <a-result
            status="404"
            title="404"
            sub-title="抱歉，您访问的页面不存在"
          >
            <template #extra>
              <a-space>
                <a-button type="primary" @click="router.push(goHome())">
                  返回首页
                </a-button>
                <a-button @click="router.back()">
                  返回上页
                </a-button>
              </a-space>
            </template>
          </a-result>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'

const userStore = useUserStore()
const router = useRouter()

// 如果用户未登录，返回登录页而不是仪表板
const goHome = () => {
  if (userStore.isLoggedIn) {
    return '/dashboard'
  }
  return '/login'
}
</script>

<style scoped>
.not-found {
  background: linear-gradient(135deg, var(--primary-color-light, #d6e6f2) 0%, var(--primary-color-dark, #769fcd) 100%);
  min-height: 100vh;
  padding: 20px;
}
</style>
